<template>
  <a-layout-header style="background: #fff; padding: 0">
    <menu-unfold-outlined
      v-if="collapsed"
      class="trigger"
      @click="setCollapsed"
    />
    <menu-fold-outlined v-else class="trigger" @click="setCollapsed" />
    <a-dropdown>
      <div class="user">
        <a-avatar
          :size="48"
          :src="this.$store.state.userStore.userInfos?.avatar"
        ></a-avatar>
        <span class="user-name">
          {{ this.$store.state.userStore.userInfos?.username }}
        </span>
        <span class="role-name">
          {{
            this.$store.state.userStore.userInfos?.role_id == 1
              ? "超级管理员"
              : this.$store.state.userStore.userInfos?.role_id == 2
              ? "管理员"
              : "普通用户"
          }}
        </span>
      </div>
      <template #overlay>
        <a-menu theme="dark" style="text-align: center">
          <a-menu-item key="editavatar" @click="handleEditAvatar"
            >修改头像</a-menu-item
          >
          <a-menu-item key="logout" @click="logout">退出登录</a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
  </a-layout-header>
  <a-modal
    v-model:visible="editVisible"
    title="修改头像"
    ok-text="确认"
    cancel-text="取消"
    :afterClose="editCloselModal"
    @ok="handleOk"
  >
    <a-form :model="editModel" :rules="editFormRules" ref="editFormRef">
      <a-form-item
        has-feedback
        :labelCol="{ span: 4, offset: 1 }"
        :wrapperCol="{ span: 18, offset: 1 }"
        label="修改头像："
        name="avatar"
      >
        <a-upload
          v-model:file-list="editModel.avatar"
          name="file"
          list-type="picture-card"
          class="avatar-uploader"
          :show-upload-list="false"
          action="http://127.0.0.1:3000/upload"
          @change="handleChange"
        >
          <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
          <div v-else>
            <loading-outlined v-if="loading"></loading-outlined>
            <plus-outlined v-else></plus-outlined>
            <div class="ant-upload-text">Upload</div>
          </div>
        </a-upload>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
// 导入图标
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  PlusOutlined,
  LoadingOutlined,
} from "@ant-design/icons-vue";
// 导入侧边栏方法
import { useSetCollapsed } from "../SiderBar/useSetCollapsed";
// 导入退出登录方法
import { useLogout } from "./useLogout";
// 导入修改头像方法
import { useEditAvatar } from "./useEditAvatar";
// 导入vuex
import { useStore } from "vuex";

export default {
  name: "",
  components: {
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    PlusOutlined,
    LoadingOutlined,
  },
  setup() {
    // 设置侧边栏
    const { collapsed, setCollapsed } = useSetCollapsed();

    // 退出登录
    const { logout } = useLogout();

    // 使用vuex
    const store = useStore();

    // 修改头像
    const {
      editVisible,
      loading,
      imageUrl,
      handleEditAvatar,
      editModel,
      editFormRef,
      editCloselModal,
      editFormRules,
      handleChange,
      handleOk,
    } = useEditAvatar(store.state.userStore.userInfos.id);

    return {
      collapsed, // 侧边栏收缩状态
      setCollapsed, // 设置侧边栏收缩状态
      logout, // 退出登录
      editVisible, // 修改头像弹框显示状态
      loading, // 上传状态
      imageUrl, // 图片预览地址
      handleEditAvatar, // 点击修改头像
      editModel, // 表单内容
      editFormRef, // 表单ref
      editCloselModal, // 关闭模态框
      editFormRules, // 校验规则
      handleChange, // 上传文件改变时的状态
      handleOk, // 点击确认
    };
  },
};
</script>
<style scoped lang="less">
.trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}
.trigger:hover {
  color: #fcff00;
}
.user {
  float: right;
  padding: 0 14px;
  margin-right: 30px;
  cursor: pointer;
  transition: backgroundColor 0.3s;
  .user-name {
    font-size: 16px;
    padding-left: 8px;
  }

  .role-name {
    font-size: 16px;
    padding-left: 8px;
    font-weight: 700;
    color: red;
  }
}
.ant-dropdown-menu {
  // background-color: #f6416c;
  background-color: #fc7777;
  padding: 0;
  ::v-deep(.ant-dropdown-menu-item):hover {
    background-color: #f52455 !important;
  }
  ::v-deep(.ant-dropdown-menu-title-content) {
    color: #fff !important;
  }
  ::v-deep(.ant-dropdown-menu-item):hover .ant-dropdown-menu-title-content {
    color: rgb(248, 220, 36) !important;
  }
}
.avatar-uploader > ::v-deep(.ant-upload) {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  img {
    width: 128px;
    height: 128px;
    border-radius: 50%;
  }
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>
